
<template>
<scroll-view scroll-y class="scrollPage">
	<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" :isBack="true">
		<block slot="backText">返回</block>
		<block slot="content">提交周末讲评</block>
	</cu-custom>
	<form >
		<view class="cu-form-group margin-top">
			<view class="title margin  cuIcon-activity line-green">班级</view>
			<input placeholder="例如:物17.5" v-model="classname"></input>
		</view>
		<view class="cu-form-group">
			<view class="title margin cuIcon-selection line-red">辅导员</view>
			<input placeholder="例如:xxx" v-model="teacher"></input>
		</view>
		<view class="cu-form-group">
			<view class="title margin line-orange cuIcon-footprint round">实到人数</view>
			<input placeholder="例如:54" tpye ='number' v-model="true_number"></input>
		</view>
		<view class="cu-form-group">
			<view class="title margin line-olive cuIcon-vip round">应到人数</view>
			<input placeholder="例如:54" tpye ='number' v-model="shoud_number"></input>
		</view>
		<view class="cu-form-group">
			<view class="title margin line-brown cuIcon-location round">讲评地点</view>
			<input placeholder="例如:弘文楼212" v-model="place"></input>
		</view>
		<view class="cu-form-group">
			<view class="title margin line-purple cuIcon-same round">辅导员是否到场</view>
			<switch @change="myswitch" :class="teacher_here?'checked':''" :checked="teacher_here"></switch>
		</view>
		
		
		  <view class="bg-white">
		  	<view class="margin-lg line-blue text-center cuIcon-news  text-bold">  讲评内容</view>
			<view class="cu-form-group margin-top" >
			<textarea maxlength="-1" placeholder="请在此填写讲评内容" auto-height focus v-model ="note"></textarea>
		</view>
		</view>
		
		<view class="cu-bar bg-white ">
			<view class="action cuIcon-album line-grey">
				讲评图片上传
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				
				<view class="grid col-4 grid-square flex-sub">
				 	<view class="bg-img" @tap="ViewImage" :data-url="image" v-if="image">
				 	 <image :src="image" mode="aspectFill" v-model ='image'></image>
				 		<view class="cu-tag bg-red" @tap.stop="DelImg">
				 			<text class='cuIcon-close'></text>
				 		</view>
				 	</view>
				 	<view class="solids" @tap="ChooseImage">
				 		<text class='cuIcon-cameraadd'></text>
				 	</view>
				 </view>
			</view>
		</view>
		<view class="text-center bg-white padding-lg margin-top-sm">
			<button class="cu-btn round lines-green" @click="submit">提交</button>
		</view>
		
		
		
	</form>

<!-- <NAUIcard :listData="detail"></NAUIcard> -->
   
	</scroll-view>
</template>

<script>
	var _self;
// import NAUIcard from '@/components/NAUI-card/NAUI-card.vue';
export default {
    data() {
        return {
			image:'',
			note: '',
			place: '',
			teacher_here: true,
			shoud_number: '',
			true_number: '',
			teacher: '',
			classname: '',
            // detail: {
            //     id: '12',
            //     content: '卡片文字内容卡片文字内容卡片文字内容卡片文字内容卡片文字内容测试走周末讲评讲评',
            //     img_url: [
            //        
            //         'http://yiban.likecy.cn/home.jpeg',
            //        
            //     ],
            //     user_name: '陈云',
            //     mark: true,
            //     type: '周末讲评',
            //     points: '0',
            //     show_times: '0',
            //     anony: false,
            //     avatarurl: 'http://img02.fs.yiban.cn/11857532/avatar/user/200',
            //     creat_time: '1552748677'
            // }
        }
    },
	

    // 注册组件
    // components: {NAUIcard},
	onLoad(){
		_self =this;
	},
    methods: {
		
	// formSubmit: function(e) {
 //            console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
 //        },
	// 	

		submit(){
		if(this.class && this.place  && this.teacher_here &&this.shoud_number &&this.true_number && this.teacher){
			uni.showToast({
				title:"请填写完整再提交～"
			});
			return;
		   }
			if(!this.image){
				uni.showToast({
					title:"您还没有选择图片哟～"
				});
				return;
			}
			else{
				this.uploadImage();
			}
			
			
		},
		myswitch(e){
			this.teacher_here =!this.teacher_here;
		},
		ChooseImage() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: (res) => {
					console.log(res);
						this.image = res.tempFilePaths[0]
					},fail(res) {
						console.log(res);
					}
			});
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.image,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这张照片？',
				cancelText: '再看看',
				confirmText: '再见',
				success: res => {
					if (res.confirm) {
						this.image='';
					}
				}
			})
		},
		
		postToWeekend(){
			 this.$http.post('api/WeekendTopic/postWeekend',{
				image:_self.image,
				note:_self.note,
				place:_self.place,
				teacher_here:(_self.teacher_here?1:0),
				shoud_number:_self.shoud_number,
				true_number:_self.true_number,
				class:_self.classname,
				teacher:_self.teacher
			})
				.then(res => {
						uni.hideLoading();
						if(res.data.code==1){
						uni.redirectTo({
							url: './list'
							
						});
						}
							})
							.catch(err => {});
			
			
			
			
		//      uni.request({
		// 	url:'http://yiban.likecy.cn/api/WeekendTopic/postWeekend',
		// 	method:'POST',
		// 	data:{
		// 		image:_self.image,
		// 		note:_self.note,
		// 		place:_self.place,
		// 		teacher_here:(_self.teacher_here?1:0),
		// 		shoud_number:_self.shoud_number,
		// 		true_number:_self.true_number,
		// 		class:_self.classname,
		// 		teacher:_self.teacher
		// 	},
		// 	header:{
		// 		'token':'1762b44d-474f-4eca-97b5-9d26aec1f486'
		// 	},success(res){
		// 		uni.hideLoading();
		// 		if(res.data.code==1){
		// 		uni.redirectTo({
		// 			url: './list'
		// 			
		// 		});
		// 		}
		// 		
		// 	}
		// });	
		},
		
		
		
		
		
		
		
		
		uploadImage(){
			uni.showLoading({
               title: '正在提交'
             });
			uni.uploadFile({
				url:this.$baseUrl+'api/common/upload',
				filePath:this.image,
				name:'file',
				formData:{
					'token':uni.getStorageSync('token')
				},success: (res) => {
					var newimg =JSON.parse(res.data);
					this.image =newimg.data.url;
					this.postToWeekend();
				}
			})
		}
		
		
	}
};
</script>





<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	#editor {
        width: 100%;
        height: 300px;
        background-color: #FFFFFF;
    }

</style>